<template>
  <div class="score-case">
        <Head
        :list='list'
        @del='delFn'
        :total='total'
        />
        <Foot
        @addFn='addFn'
        
        />
  </div>
</template>

<script>

import Head from './components/scoreHeader.vue'
import Foot from './components/scoreFoot.vue'
export default {
  components:{
    Head,
    Foot
  },
  name: 'ScoreCase',
  data () {
    return {
      list: JSON.parse(localStorage.getItem('chengji')) || [] //从本地取数据 并且判断如果没有数据给一个空数组
    
    }
  },
   methods:{
       delFn(index){
         this.list.splice(index,1)   //删除成绩，根据子组件传过来的索引 删除对应的成绩
       },
       
       addFn(subject,score){
         if(score>=0 &&score <=100 && subject) {  //校验
            this.list.push( {id: this.list.length? this.list.at(-1).id+1 : 1, //校验成功往数组里添加数据
            subject,
             score, 
             date: new Date().toLocaleString()},
             )
         }else alert('请输入正确的格式')
       }
   },
   computed:{
     total(){
       return this.list.reduce((val,item)=>val+item.score,0) //数组累计方法
     }
   },
   watch:{
    list:{    //监视数组变化
      deep:true,  //深度监视
      immediate:true,  //一上来就调用一次
      handler(val){   //val 修改后的值
           localStorage.setItem('chengji',JSON.stringify(val)) //将修改后的数据val保存到本地
      }
    }
   }
};
</script>

<style lang="less">
.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  .table {
    flex: 4;
    table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      th {
        background: #f5f5f5;
      }
      tr:hover td {
        background: #f5f5f5;
      }
      td,
      th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
        &.red {
          color: red;
        }
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .form {
    flex: 1;
    padding: 20px;
    .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
}
</style>